<template>
    <div class="search-header-box">
        <div class="menu-name">{{ name }}</div>
        <slot name="form"></slot>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';

interface Props {
    name: string;
}

const props = withDefaults(defineProps<Props>(), {
    name: ''
});

const data = () => {
    return {};
};

const watch = {};

onMounted(() => {
    // 组件挂载后的逻辑
});

const methods = {};

onBeforeUnmount(() => {
    // 组件销毁前的逻辑
});
</script>

<style lang="scss" scoped>
.search-header-box {
    background-color: #fff;
    height: auto !important;
    padding: 20px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.menu-name {
    border-left: 4px solid var(--theme-primary);
    height: 16px;
    margin-bottom: 20px;
    display: flex;
    padding-left: 13px;
    align-items: center;
    font-weight: 400;
    color: var(--text-black-85);
    font-size: var(--font-size-16);
    font-family: "SourceHanSans-Medium";
}
</style>

<style lang="scss">
.search-header-box {
    .el-form-item--small.el-form-item {
        margin-bottom: 12px !important;
    }
}
</style>
